<script setup>
import { ref, reactive, watch, onMounted, nextTick, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { eventnodeuserApi as MainApi } from '@T2/service/api.ts';
import { useCurrentWatchStore, useIuserInfoStore } from '@T2/store/users.ts';
import { isJSON } from '@T2/utils/utils.ts';

const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;
const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;

const show = ref(true);

const numList = ref([])

const { title, nodeID, eventID, typeObj, viewNodeRoles } = defineProps({
  title: {
    type: String,
    required: true,
  },
  nodeID: {
    type: Number,
    required: true,
  },
  eventID: {
    type: Number,
    required: true,
  },
  typeObj: {
    type: Object,
    default: () => ({}),
  },
  viewNodeRoles: {
    type: String,
    default: ''
  }
});
const emits = defineEmits(['closed']);

onMounted(() => {
  GetMainTable();
});

const MainTable = reactive({
  data: [],
  total: 0,
});
const Filter = reactive({
  page: 1,
  pagesize: 30,
  ordering: '-create_time',
  search: '',
});
watch(() => ({ ...Filter }), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMainTable();
  } else {
    Filter.page = 1;
  }
});
const GetMainTable = () => {
  MainApi({
    method: 'get',
    params: {
      ...Filter,
      event: eventID,
      node: nodeID,
    }
  }).then(res => {
    let list = res?.results || [];
    MainTable.data = res?.results || [];
    MainTable.total = res?.count || 0;
    if(viewNodeRoles){
      let allRoles = viewNodeRoles.split(',')
      let allNum = 0
      allRoles.forEach((item) => {
        allNum += typeObj[item] * 1
      })
      let successNum = list.filter((item) => item.mark == '赞成')
      let noVoteNum = list.filter((item) => item.mark == '反对')
      let allPushNum = successNum.length * 1 + noVoteNum.length * 1;
  
      numList.value = [
        { name: '总人数', value: allNum },
        { name: '已投票', value: allPushNum },
        { name: '未投票', value: allNum - allPushNum },
        { name: '赞成票', value: successNum.length },
        { name: '反对票', value: noVoteNum.length }]
    }
  });
}

const handleCancel = () => {
  emits('closed');
}
</script>

<template>
  <div>
    <el-drawer v-model="show" size="980" class="popup" @closed="handleCancel()">
      <template #header>
        <div class="drawer-header">{{ title }}投票情况</div>
      </template>
      <template #default>
        <div class="content-box mainCard flex-column">
          <div class="content-info" v-if="numList?.length" style="display: flex;margin-bottom: 20px;">
            <div class="num-item" style="flex: 1;text-align: center;" v-for="item in numList">
              <div class="item-num" style="font-weight: bold;">{{ item.value }}</div>
              <div class="item-name">{{ item.name }}</div>
            </div>
          </div>
          <el-table :data="MainTable.data" scrollbar-always-on>
            <el-table-column label="投票人" prop="create_user_truename" min-width="160px"
              show-overflow-tooltip></el-table-column>
            <el-table-column label="投票" prop="mark" min-width="140px" show-overflow-tooltip></el-table-column>
            <el-table-column label="意见" prop="txt" min-width="250px" show-overflow-tooltip></el-table-column>
          </el-table>
          <el-pagination layout="->, total, prev, pager, next, sizes" background :page-sizes="[10, 20, 30, 50, 100]"
            :pager-count="5" v-model:currentPage="Filter.page" v-model:page-size="Filter.pagesize"
            :total="MainTable.total" />
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="handleCancel()">关 闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';

.content-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.drawer-header {
  font-weight: 500;
  font-size: 20px;
  color: #252525;
}
</style>
<style scoped>
:deep(.el-drawer__body) {
  padding: 0 !important;
}

:deep(.el-drawer__footer) {
  text-align: left;
}
</style>